<!DOCTYPE html>
<html lang="en">

<head>
    <title>注册</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
    <script src="../js/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="../css/public.css">
    <style>
        .register_bg {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            background: url('../images/reg/bg.png') center no-repeat;
            background-size: 100%;
            z-index: 1;
        }

        .user-logbg {
            margin-top: 60px;
            height: 24%;
            background: url('../images/reg/user-logo-bg.png') center no-repeat;
            background-size: 40%;
            position: relative;
        }

        .user-logbg img {
            display: block;
            width: 24%;
            margin: auto;
            padding-top: 16%;
        }

        .register_form {
            margin-top: 20px;
        }


        .home_zhangdui_nav {

            background: #021349 url('../images/reg/back.png') 10px center no-repeat;
            background-size: 30px;
        }

        .getCode {
            position: absolute;
            top: 25%;
            height: 23px;
            width: 90px;
            right: 11%;
            text-align: center;
            line-height: 25px;
            border-left: 1.5px solid #7069B3;
            font-size: .35rem;
            color: #7069B3;
            font-weight: 800;
        }

        .register_form .getCode input {
            height: 27px;
            display: block;
            width: 100%;
            margin: 0 auto;
            box-sizing: border-box;
            padding-left: 0;
            color: #7069B3;
            background: none;
        }
    </style>
</head>

<body>

    <div class="register_bg">
        <div class="home_zhangdui_nav">
            <span class="goBack"></span>
            <div style="clear:both"></div>
            注册
        </div>
        <div class="user-logbg">
            <img src="../images/reg/user-logo.png" alt="">
        </div>
        <div class="register_form">
            <div class="input-box">
                <i class="icon-reg icon-phone"></i>
                <input class="account" type="phone" name="account" placeholder="请输入手机号码" required>
                <div class="getCode">
                    <input type="button" style="height:27px" class="sendbtn" value="获取验证码" />
                </div>

                <div class="error">请输入正确的手机号码！</div>
            </div>
            <div class="input-box">
                <i class="icon-reg icon-code"></i>
                <input class="checkCode" type="text" name="checkCode" placeholder="请输入验证码" required>
                <div class="error">请输入正确的验证码！</div>
            </div>
            <div class="input-box">
                <i class="icon-reg icon-pwd"></i>
                <input class="password" type="password" name="password" placeholder="请输入密码" required>

            </div>
            <div class="input-box">
                <i class="icon-reg icon-email"></i>
                <input class="email" type="email" name="email" placeholder="请输入邮箱" required>
                <div class="error">请输入正确的邮箱！</div>
            </div>
            <div class="input-box">
                <i class="icon-reg icon-invite"></i>
                <input class="inviteCode" type="text" name="inviteCode" placeholder="请输入邀请码">
            </div>

            <button class="register"></button>
        </div>
    </div>

    <script src="../js/public.js"></script>
    <script>
        $(function () {


            let handel,
                num = 60, //几秒后重新获取
                curCount //当前剩余秒数

           
                    // if ($('.account').val().length == 11) {
                    //     $('.sendbtn').click(() => {
                    //         getCode()
                    //     })
                    // }
                
            $('.register').click(() => {
                doRegister()
            })


            // Shift+Alt+A Toggle block comment  多汗注释
            //表单验证
            $('.account').blur(() => {
                let phone = $('.account').val()
            
                // console.log('是去加点')
                // $.post(checkNameUrl,{name},(res)=>{
                //     console.log(res)
                // })
                if (!/^1[3|4|5|7|8][0-9]{9}$/.test(phone)) {
                    $('.account').next().next().css({
                        'display': 'block'
                    })
                    console.log('ss')
                } else {
                    $('.sendbtn').click(() => {
                            getCode()
                        })
                    $('.account').next().next().css('display', 'none')
                }
            })

            $('.email').blur(() => {
                let email = $('.email').val()
                let testemial = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/
                if (testemial.test(email)) {
                    $('.email').next().css('display', 'none')
                } else {
                    $('.email').next().css({
                        'display': 'block'
                    })
                    console.log('ss')

                }
            })



            function getCode() {
                curCount = num
                let phone = $('.account').val()
                $(".sendbtn").attr({disabled:"true"}).val(curCount + "秒再获取");
                $(".sendbtn").css('color',"#fff")
                handel = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
                $.post(sendCodeUrl, {
                    phone
                }, (res) => {
                    console.log(res)
                })
            }



            function doRegister() {
                let fdMobile = $('.account').val()
                let fdEmail = $('.email').val()
                let inputCode = $('.checkCode').val()
                let fdPwd = $('.password').val()
                let fdAvataUrl = ``
                let fdRecommendCode = $('.inviteCode').val()
                // console.log(userNamer)
                if ($('.error').css('display') == 'none' && fdMobile.length != 0 && fdEmail.length != 0 &&
                    inputCode.length !=
                    0 && fdPwd != 0) {
                    $.post(registerUrl, {
                        fdMobile,
                        fdEmail,
                        inputCode,
                        fdPwd,
                        fdAvataUrl,
                        fdRecommendCode
                    }, (res) => {
                        console.log(res)
                        if(res.code == 0) {
                            alert('注册成功！')
                            window.location.href='./login.html'
                        }else{
                            alert('注册失败！')
                        }
                    })
                } else {
                    alert('请正确输入后再点击注册')
                }

            }

            //timer处理函数
            function SetRemainTime() {
                if (curCount == 0) {
                    window.clearInterval(handel); //停止计时器
                    $(".sendbtn").removeAttr("disabled").val("重新获取"); //启用按钮
                } else {
                    curCount--;
                    $(".sendbtn").val(+curCount + "秒再获取");
                }
            }


        })
    </script>
</body>

</html>